<script setup>
import {computed , ref } from "vue";
import { useStore } from "vuex";
const store = useStore()

let kechengList = computed(() => store.state.kecheng.listxq)
// 返回
    const onClickLeft = () => history.back();
    
</script>

<template>
  <div>
    <van-nav-bar
      :fixed="true"
      :placeholder="true"
      title="课程详情"
      left-arrow
      @click-left="onClickLeft"
    />
    <div class="xqzhanshi">
      <div class="xqbt">{{kechengList.name}}</div>
      <div class="dzrqsk">
        <div>
          <van-icon name="location-o" />
          <span>丰台角门少儿学习中心220教室</span>
        </div>
        <div>
          <van-icon name="calendar-o" /> <span> {{kechengList.startTime + kechengList.finishTime}}</span>
        </div>
        <div>
          <van-icon name="underway-o" /> <span>周一,周四17:00-18:30</span>
        </div>
      </div>
    </div>

    <div class="baom-keshi">
      <span>{{kechengList.placesNum}}人已报名</span>
      <span>￥{{kechengList.skPrice}}/{{kechengList.hour}}课时</span>
    </div>

    <van-tabs
      title-active-color="rgba(0, 121, 254, 1)"
      color="rgba(0, 121, 254, 1)"
      line-width="100px"
      line-height="2px"
      v-model:active="active"
    >
      <van-tab title="课程简介">
        <div class="kcjj">
          <span class="kcjj-duanl">{{kechengList.introduce}}</span>
          <div class="kcjj-btxx">
            <div>适用学员：</div>
            <span>{{kechengList.grade}}。</span>
          </div>
          <div class="kcjj-btxx">
            <div>教学目标：</div>
            <span>{{kechengList.grade}}。</span>
          </div>
        </div>
      </van-tab>
      <van-tab title="课程大纲">
        
        <div class="kcdg">
          {{kechengList.inputWid}}
        </div>
      </van-tab>
      <van-tab title="师资介绍">
        <van-card
          desc="初中二年级数学老师"
          title="张琦"
          thumb="https://img.yzcdn.cn/vant/ipad.jpeg"
        >
          <template #tags>
            <span>学历：本科</span>
          </template>
        </van-card>
        <van-divider :style="{ borderColor: '#000' }" />
        <div class="xqzhanshi">
             <div class="kcjj-btxx">
            <div>教学成果</div>
            <span
              >培养了孩子有效的学习方法和习惯，并使之成绩普遍提高，在我的循循善诱下，使得其举一反三，对知识点的吸收更为迅速，深得学生喜爱和家长的认可。无论是新生还是老学员，在纪老师的引导下孩子们对数学产生了极大的兴趣，有自主学习的动力，成绩提高非常明显。</span
            >
          </div>
        </div>
      </van-tab>
    </van-tabs>
    <div class="dibubut">
      <van-row>
        <van-col span="12"><van-button disabled color="#7232dd" size="large">￥{{kechengList.price}}</van-button></van-col>
        <van-col span="12"><van-button type="primary" size="large">提交订单</van-button></van-col>
      </van-row>
    </div>
  </div>
</template>



<style >
.dibubut{
  width: 100%;
  position: fixed;
  bottom: 10px;
}
.c-hongse {
  color: red;
}

.c-qianshu {
    font-weight: 600;
    text-align: center;
    width: 100%;
    line-height: 80px;
    font-size: 16px;
}

.c-tijiaolan {
    width: 100%;
    height: 80px;
    display: flex;
    justify-content: space-around;
    position: fixed;
    bottom: 0;
    
}

.c-tjddli {
    width: 100%;
    line-height: 80px;
    background-color: #108ee9;
    text-align: center;
    font-size: 16px;
    color: #fff;
}

.xqzhanshi {
  padding: 15px;
}

.xqbt {
  font-weight: 400;
  font-size: 16px;
  line-height: 20px;
}

.dzrqsk {
  font-size: 12px;
  color: rgb(153, 153, 153);
}

.dzrqsk div {
  margin-top: 10px;
}

.dzrqsk span {
  margin-left: 10px;
}

.baom-keshi {
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
  padding: 10px;
}

.baom-keshi span:nth-child(1) {
  font-weight: 700;
  font-size: 13px;
  color: #999999;
}

.baom-keshi span:nth-child(2) {
  font-weight: 700;
  color: #ff0000;
  font-size: 13px;
  margin-left: 50px;
}

.kcjj {
  padding: 10px 20px;
}

.kcjj-duanl {
  font-style: normal;
  font-size: 12px;
  text-align: left;
  line-height: 32px;
}

.kcjj-btxx div:nth-child(1) {
  color: #333333;
  font-style: normal;
  font-size: 12px;
  text-align: left;
  line-height: 32px;
  font-weight: 700;
}

.kcjj-btxx span {
  font-weight: 400;
  font-style: normal;
  font-size: 12px;
  text-align: left;
  line-height: 32px;
}

.kcdg {
  display: flex;
  justify-content: space-around;
  font-size: 14px;
  text-align: left;
  font-weight: 400;
  border-bottom: 1px solid #ccc;
  border-top: 1px solid #ccc;
  line-height: 40px;
}
</style>
